<template>
  <div class="cinema">
    <p v-if="show">加载中。。。。</p>
    <div class="cinema-box">
      <div class="cinema-top pl12 flexBetween borderB">
        <div class="cinema-top-place ci" @click="toCityLocation()">
          <span class="fz14">{{ cityInfo.name }}</span>
          <img src="../../assets/img/cinema-desc.png" alt="" srcset="" />
        </div>
        <div>影院</div>
        <div class="cinema-top-search pr20" @click="toCinemaList()">
          <img src="../../assets/img/cinema-search.png" alt="" srcset="" />
        </div>
      </div>
      <div class="cinema-choose fz14">
        <van-dropdown-menu class="title">
          <!-- value1:代表默认显示的值 -->
          <van-dropdown-item v-model="districtName" :options="distinctList" />
          <van-dropdown-item v-model="ticketFlag" :options="ticketList" />
          <van-dropdown-item v-model="distance" :options="distanceList" />
        </van-dropdown-menu>
      </div>

      <div class="cinema-main" ref="wrapper">
        <div
          @click="toCinemaSchedule(item.cinemaId)"
          class="cinema-main-wrap borderB p15 spaceAround"
          v-for="item in CinemaList"
          :key="item.cinemaId"
        >
          <div class="cinema-main-wrap-left pr16">
            <div class="ellipsis">{{ item.name }}</div>
            <div class="cinema-main-address fz12 ellipsis">
              {{ item.address }}
            </div>
          </div>
          <div class="cinema-main-wrap-right">
            <div class="cinema-price">￥{{ item.lowPrice / 100 }}起</div>
            <div class="cinema-main-address fz12">距离未知</div>
          </div>
        </div>
      </div>
    </div>

    <bottom-bar></bottom-bar>
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar/BottomBar.vue";
import BScroll from "better-scroll";

export default {
  name: "cinema",
  components: {
    "bottom-bar": BottomBar,
  },
    data() {
    return {
      // currentDisct:"全城",
      show: false,
      scroller: null,

      districtName: "全城",
      ticketFlag: "1",
      distance: "A",

      ticketList: [
        { text: "APP订单", value: "1" },
        { text: "前台兑换", value: "2" },
      ],
      distanceList: [
        { text: "最近去过", value: "A" },
        { text: "离我最近", value: "B" },
      ],
    };
  },
  computed: {
    // 读取本地存储的城市
    cityInfo() {
      //刷新时读取上一次的cityId

      return JSON.parse(localStorage.getItem("cityInfo"));
    },
    CinemaList() {
      // 不能从本地存储读取，本地存储读取会出现影院列表不刷新，不需要本地存储
      let list = this.$store.state.CinemaList;
      //// let list = this.$store.state.CinemaList || JSON.parse(localStorage.getItem("CinemaList"));
      if (this.districtName === "全城") {
        return list;
      } else {
        return list.filter((item) => item.districtName == this.districtName);
      }
    },
    distinctList() {
      let list = this.$store.state.CinemaList;
      //// let list = JSON.parse(localStorage.getItem("CinemaList"));
      //放区名
      let arr = [{ text: "全城", value: "全城" }];
      //1. 先遍历影院列表找出  区名
      if (list instanceof Array) {
        list.forEach((item) => {
          let flag = arr.some(
            (district) => district.text === item.districtName
          );
          if (flag === false) {
            arr.push({
              text: item.districtName,
              value: item.districtName,
            });
          }
        });
      }

      return arr;
    },
  },
    created() {
    let that = this;
    that.show = true;
    //  var url="https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7943003";
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: { "X-Host": "mall.film-ticket.cinema.list" },
        params: {
          cityId: that.cityInfo.cityId,
          ticketFlag:that.ticketFlag,
          k: 7943003,
        },
      })
      .then(function (res) {
        that.$store.commit("initCinema", res.data.data.cinemas);
        that.show = false;
        that.$nextTick(() => {
          that.scroller = new BScroll(that.$refs.wrapper, {
            scrollY: true,
            click:true,
          });
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  mounted() {},
  watch:{
    ticketFlag(newVal){
      console.log(newVal);
      let that = this;
    //  var url="https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7943003";
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: { "X-Host": "mall.film-ticket.cinema.list" },
        params: {
          cityId: that.cityInfo.cityId,
          ticketFlag:newVal,
          k: 7943003,
        },
      })
      .then(function (res) {
        that.$store.commit("initCinema", res.data.data.cinemas);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },


  methods: {
    toCinemaSchedule(cinemaId) {
      this.$router.push({
        path: "/cinema/" + cinemaId,
      });
    },
    toCityLocation() {
      this.$router.push({
        path: "/city",
      });
    },
    toCinemaList() {
      this.$router.push({
        name: "cinemaList",
      });
    },
  },

};
</script>

<style scoped lang="scss">
.borderB {
  border-bottom: 1px solid #ededed;
}
.cinema-top {
  height: 44px;
  width: 100%;
  flex-shrink: 0;
  position: fixed;
  background-color: #fff;
}
.ci {
  display: flex;
  align-items: center;
}
span {
  margin-right: 5px;
}
.cinema-top-place img {
  width: 6px;
  height: 3px;
}
.cinema-top-search img {
  width: 18px;
  height: 18px;
}

.cinema-choose {
  height: 50px;
  width: 100%;
  align-items: center;
  top: 44px;
  flex-shrink: 0;
  background-color: #fff;
  position: fixed;
}
.cinema-choose img {
  width: 6px;
  height: 3px;
}
.cinema-main {
  margin-top: 94px;
  margin-bottom: 42px;
}
.cinema-main-wrap-left {
  width: 70%;
}

.cinema-main-wrap-right {
  text-align: center;
}
.cinema-price {
  color: #ff5f16;
}
.cinema-main-address {
  color: #797d82;
  margin-top: 5px;
}
.cinema {
  display: flex;
  flex-direction: column;
  height: 100%;
  &-box {
    flex-grow: 1;
    overflow: auto;
  }
}
bottom-bar {
  flex-shrink: 0;
  height: 42px;
}
</style>
